<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        textarea{
            min-width: 90%;
            min-height: 150rem;
            max-width: 90%;
            max-height: 150rem;
            border: none;
            outline: none;
            margin-left: 0.5%;
            padding: 17rem 16rem;
            font-size: 13rem;
        }
        .clearfloat:after{
            display:block;
            clear:both;
            content:"";
            visibility:
            hidden;height:0
        }
        .clearfloat{
            zoom:1
        }
        .clearfloat span{
            float: right;
            font-size: 12rem;
            color: #959595;
            margin-right: 11.5rem;
        }
        .add{
            position: relative;
            margin-left: 14.5rem;
            margin-right: 14.5rem;
            margin-top: 15rem;
            padding-bottom: 13.5rem;
            border-bottom: 1.5rem dashed #959595;
        }
        .add img{
            width: 53rem;
            height: 53rem;
        }
        #docpicker{
            width: 100rem;
            height: 100rem;
            position: absolute;
            left: 0;
            top: 0;
            outline: none;
            filter: alpha(opacity=0);
            opacity: 0;
        }
        .tel{
            margin-left: 16rem;
            margin-top: 20rem;
        }
        .tel input{
            border: none;
            background: none;
            outline: none;
            width: 100%;
        }
        button{
            position: absolute;
            left: 50%;
            margin-left: -44rem;
            margin-top: 39.5rem;
            border: none;
            outline: none   ;
            background: rgb(106, 116, 247);
            border-radius: 22rem;
            width: 88rem;
            height: 24.5rem;
            line-height: 24.5rem;
            color: #ffffff;
            font-size: 16.19rem;
            cursor:pointer;
        }
    </style>
    <script>
        !function(n){
            var  e=n.document,
            t=e.documentElement,
            i=37500,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
        }(window);
    </script>
</head>
<body>
    <div id="app">
        <div style="border-top: 8.5rem solid rgb(246, 246, 246);">
            <textarea name="" id="textarea" @input="descInput" maxlength="200" placeholder="请描述您遇到的问题或想反馈的意见 （必填）" v-model="desc"></textarea>
        </div>
        <div class="clearfloat">
            <span v-cloak>{{remnant}}/200</span>
        </div>
        <div class="add">
            <img src="__CDN__/assets/images/添加图片.png" id="show">
            <input type="file" id="docpicker" accept="image/*"  onchange="changepic(this)">
        </div>
        <div class="tel">
            <input type="text" placeholder="请留下您的电话或邮箱（选填）">
        </div>
        <button>提交</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            remnant: 0,
            desc:''
        },
        mounteds(){
            
        },
        methods:{
            descInput() {
                let txtVal = this.desc.length;
                this.remnant =txtVal;
                console.log(txtVal)
            }
        },
        
    })
    
</script>
</html>